<template>
    <div class="merchant">
        <!-- sendInfo -->
        <div class="section sendInfo">
            <h3>配送信息</h3>
            <div class="delivery">
                <div>
                    <span>{{merInfo.deliveryMethods}}</span>
                    <span>约{{merInfo.deliveryTime}}分钟送达，距离{{merInfo.deliveryDistance}}m</span>
                </div>
                <div>配送费¥{{merInfo.deliveryMoney}}</div>
            </div>
        </div>
        <!-- safeguard -->
        <div class="section help">
            <h3>商家服务</h3>
            <div class="helpBox">
                <div class="helpInfo">
                    <span class="dabao">保<span class="xiaobao">保</span></span>
                    <span class="helpTxt">该商户食品安全已由国泰产险承担，食品安全有保障</span>
                </div>
            </div>
        </div>
        <!-- photo -->
        <div class="section photo">
            <h3>商家实景</h3>
            <div class="mui-clearfix">
                <a v-for="item in merInfo.photo" :key="item.id">
                    <img :src="item.img">
                    <span class="phptoTxt">{{item.txt}}</span>
                </a>
            </div>
        </div>
        <!-- shopInfo -->
        <div class="section shopInfo">
            <h3>商品信息</h3>
            <ul>
                <li>{{merInfo.merName}}</li>
                <li>
                    <span>品类</span>
                    <span>{{merInfo.category}}</span>
                </li>
                <li>
                    <span>商家电话</span>
                    <span>{{merInfo.tel}}<span class="el-icon-arrow-right"></span></span>
                </li>
                <li>
                    <span>地址</span>
                    <span>{{merInfo.address}}</span>
                </li>
                <li>
                    <span>营业时间</span>
                    <span>{{merInfo.hours}}</span>
                </li>
            </ul>
        </div>
        <!-- qualification -->
        <div class="section qualification">
            <h3>营业资质<span class="el-icon-arrow-right"></span></h3>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 信息
            merInfo: {
                deliveryMethods: '蜂鸟专送',
                deliveryTime: 20,
                deliveryDistance: 449,
                deliveryMoney: 0.6,
                isSafeguard: 1,
                photo: [{
                    id: 1,
                    img: './static/images/photo1.jpg',
                    txt: '门面(2张)'
                }, {
                    id: 2,
                    img: './static/images/photo2.jpg',
                    txt: '大堂(4张)'
                }, {
                    id: 3,
                    img: './static/images/photo3.jpg',
                    txt: '后厨(1张)'
                }],
                merName: '香他她煲仔饭（潇湘奥园店）',
                category: '煲仔饭, 其他快餐',
                tel: '18670003977',
                address: '长沙市高新开发区岳麓西大道660号潇湘奥园13、15栋-110-1号',
                hours: '09:30-21:00'
            }
        }
    }
}
</script>

<style scoped>
    .merchant {
        background: #f5f5f5;
        font-size: 13px;
        overflow-y: auto;
    }
    .section {
        margin-bottom: 10px;
        padding: 15px;
        font-size: 13px;
        background-color: #fff;
        color: #666;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
    }
    .section h3 {
        margin: 0;
        color: #000;
        font-size: 15px;
        line-height: 21px;
    }
    /* sendInfo */
    .delivery {
        margin-top: 16px;
    }
    .delivery span:first-child {
        width: 52px;
        font-size: 11px;
        margin-right: 10px;
        display: inline-block;
        text-align: center;
        color: #fff;
        background-color: #0097ff;
        border-radius: 3px;
    }
    .delivery div {
        margin-bottom: 7px;
    }
    /* help */
    .helpBox {
        margin-top: 16px;
    }
    .helpInfo {
        display: flex;
        font-size: 13px;
        align-items: center;
        margin-bottom: 11px;
    }
    .dabao {
        position: relative;
        color: transparent;
        white-space: nowrap;
        height: 11px;
        padding: 6px;
        margin-right: 6px;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 1px;
        border: 1px solid rgb(153, 153, 153);
    }
    .xiaobao {
        position: absolute;
        top: 0;
        left: 0;
        right: -100%;
        bottom: -100%;
        transform: scale(.5);
        transform-origin: 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: rgb(153, 153, 153);
    }
    .helpTxt {
        flex: 1;
        font-size: 13px;
        line-height: 1.38;
    }
    /* photo */
    .merchant .mui-clearfix {
        margin-top: 8px;
    }
    .photo a {
        position: relative;
        float: left;
        margin-right: 7px;
        width: 78px;
        height: 78px;   
        overflow: hidden;
    }
    .photo img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .phptoTxt {
        position: absolute;
        display: block;
        bottom: 0;
        width: 100%;
        text-align: center;
        height: 18px;
        line-height: 18px;
        color: #eee;
        background-color: rgba(0,0,0,.6);
    }
    /* shopInfo */
    .shopInfo li {
        display: flex;
        padding: 15px 0;
        justify-content: space-between;
        align-items: center;
    }
    .shopInfo li:not(:first-child) {
        border-top: 1px solid #f0f0f0;
    }
    .shopInfo li span:first-child {
        font-weight: 700;
        color: #333;
    }
    .shopInfo li span:last-child {
        max-width: 250px;
        text-align: right;
    }
    .el-icon-arrow-right {
        float: right;
        line-height: 21px;
        font-size: 15px;
        color: #ccc!important;
    }
</style>